import React from 'react';

import View from 'lib/View.jsx';
import dispatcher from 'lib/dispatcher';
import GridWidget from 'lib/components/GridWidget.jsx';

import MainScope from './MainScope.es6';

export default class MainView extends View {
  toggleEvents() {
    dispatcher.dispatch({
      $type: 'toggle_events'
    });
  } // toggleEvents

  render() {
    let count = '--';
    if (this.state.grid.data) {
      count = this.state.grid.data.length;
    }

    let inputKey = 'meta-' + Date.now();

    return (
      <div>
        <div className="pure-g">
          <div className="pure-u-1">
            <input
              id={ inputKey }
              type="checkbox"
              style={{ marginLeft: '8px' }}
              onChange={ this.toggleEvents.bind(this) }
              defaultValue={ this.state.isHiddenEvent } />
            <label htmlFor={ inputKey }>显示所有隐藏事件</label>
            <span style={{ marginLeft: '35px', color: '#D2D2D2' }}>共 { count } 个事件</span>
          </div>
          <div className="pure-u-1">
            <GridWidget cols={ this.state.cols } store={ this.state.grid } />
          </div>
        </div>
      </div>
    ); // return
  } // render
}

MainView.defaultProps = {
  Scope: MainScope
}
